<template>
    <div class="item-info-wapper">
        <van-nav-bar
                title="单据详情"
                left-text="返回"
                left-arrow
                fixed
                @click-left="onClickLeft"
                @click-right="onClickRight"
        >
            <van-icon name="arrow-left" slot="left"/>
            <van-icon name="scan" slot="right" />

            <!-- <van-button
                    type="primary"
                    round
                    size="small"
                    slot="right"
            >提交
            </van-button> -->
            <van-icon name="button" slot="right"/>
            <!--<van-icon name="search" slot="right"/>-->
        </van-nav-bar>
        <div class="item-info-content">
            <div class="item-panel">
                <div class="item-panel-content">
                    <van-panel title="单据信息">
                        <div style="padding: 10px 0px">
                            <div class="clearfix">
                                <span class="user-line-label">单据编码：</span>
                                <span class="user-line-input">{{ invbillmstrs.billid }}</span>
                                <!--<span class="user-line-input">物资号</span>-->
                            </div>
                            <div class="clearfix">
                                <span class="user-line-label">单据状态：</span>
                                <span class="user-line-input">{{ invbillmstrs.statusDes }}</span>
                                <!--<span class="user-line-input">物资号</span>-->
                            </div>
                                                      <div class="clearfix">
                                <span class="user-line-label">事物原因：</span>
                                <span class="user-line-input">{{
                  invbillmstrs.reasondescription
                }}</span>
                            </div>
                            <div class="clearfix">
                                <span class="user-line-label">事物日期：</span>
                                <span class="user-line-input">{{
                  invbillmstrs.transdate | timestampToTime
                }}</span>
                            </div>
                            <div class="clearfix">
                                <span class="user-line-label">移入地点：</span>
                                <span class="user-line-input">{{
                  invbillmstrs.issuesiteid
                }}</span>
                            </div>
                            <div class="clearfix">
                                <span class="user-line-label">移出地点：</span>
                                <span class="user-line-input">{{
                  invbillmstrs.recvsiteid
                }}</span>
                            </div>
                            <div class="clearfix">
                                <span class="user-line-label">审核人：</span>
                                <span class="user-line-input">{{ invbillmstrs.username }}</span>
                            </div>
<!--                            <div class="clearfix">-->
<!--                                <span class="user-line-label">制单人：</span>-->
<!--                                <span class="user-line-input">{{ invbillmstrs.compiler }}</span>-->
<!--                            </div>-->
                            <div class="clearfix">
                                <span class="user-line-label">制单日期：</span>
                                <span class="user-line-input">{{
                  invbillmstrs.compiledate | timestampToTime
                }}</span>
                            </div>
<!--                            <div class="clearfix">-->
<!--                                <span class="user-line-label">供应商：</span>-->
<!--                                <span class="user-line-input">{{-->
<!--                  invbillmstrs.issuecoid-->
<!--                }}</span>-->
<!--                            </div>-->
<!--                            <div class="clearfix">-->
<!--                                <span class="user-line-label">区域：</span>-->
<!--                                <span class="user-line-input">{{-->
<!--                  invbillmstrs.sitearea-->
<!--                }}</span>-->
<!--                            </div>-->
                            <div class="clearfix">
                                <span class="user-line-label">备注：</span>
                                <span class="user-line-input">{{ invbillmstrs.remark }}</span>
                            </div>


                        </div>
                    </van-panel>
                </div>
            </div>


            <div class="item-panel">
                <div class="item-panel-content">
                    <van-panel title="物资详情">
                        <van-list
                                v-model="loadingF"
                                :finished="finished"
                                finished-text="没有更多了"
                                @load="onLoad"
                        >
                            <van-cell
                                    value=""
                                    label=""
                                    is-link
                                    @click="showInfo(item.recordid,invbillmstrs.status)"
                                    v-for="(item, index) in itemInfo"
                                    :key="index"
                            >
                                <!-- 使用 title 插槽来自定义标题 -->
                                <template slot="title">
                                    <span class="custom-title">{{ item.description }}</span>
                                    <!--<van-tag type="primary" style="margin-right: 5px;">{{item.itemid}}</van-tag>-->
                                    <!--<van-tag type="success">{{item.itemweight| filterType}}</van-tag>-->
                                </template>
                                <template slot="label">
                                    <van-tag type="primary" style="margin-right: 5px;font-size: 12px;">{{
                                        item.itemid
                                        }}
                                    </van-tag>
                                    <!-- <van-tag type="success">{{
                                      item.itemweight | filterType
                                    }}</van-tag> -->
                                </template>
                            </van-cell>
                        </van-list>
                    </van-panel>
                </div>
            </div>

<!--            <div class="item-panel">-->
<!--                <div class="item-panel-content">-->
<!--                    <van-panel title="物资详情">-->
<!--                        <div style="padding: 10px 0px">-->

<!--                            <div class="clearfix" v-for="item in itemInfo" style="padding-bottom: 10px">-->
<!--                                <span class="user-line-label">物资编码：</span>-->
<!--                                <span class="user-line-input1"-->
<!--                                      @click="showInfo(item.recordid,invbillmstrs.status)">{{ item.itemid }}</span>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; <div class="clearfix">-->
<!--                                <span class="user-line-label">物资编码：</span>-->
<!--                                <span class="user-line-input1"-->
<!--                                      @click="showInfo(billInfo.itemid)">{{ billInfo.itemid }}</span>-->
<!--                            </div> &ndash;&gt;-->
<!--                            &lt;!&ndash;<div class="clearfix">&ndash;&gt;-->
<!--                            &lt;!&ndash;<span class="user-line-label">物资名称：</span>&ndash;&gt;-->
<!--                            &lt;!&ndash;<span class="user-line-input">{{ billInfo.description }}</span>&ndash;&gt;-->
<!--                            &lt;!&ndash;</div>&ndash;&gt;-->
<!--                            &lt;!&ndash;<div class="clearfix">&ndash;&gt;-->
<!--                            &lt;!&ndash;<span class="user-line-label">采购方式：</span>&ndash;&gt;-->
<!--                            &lt;!&ndash;<span class="user-line-input">{{ billInfo.refrence }}</span>&ndash;&gt;-->
<!--                            &lt;!&ndash;</div>&ndash;&gt;-->
<!--                            &lt;!&ndash;<div class="clearfix">&ndash;&gt;-->
<!--                            &lt;!&ndash;<span class="user-line-label">专业：</span>&ndash;&gt;-->
<!--                            &lt;!&ndash;<span class="user-line-input">{{ billInfo.subsystemid }}</span>&ndash;&gt;-->
<!--                            &lt;!&ndash;</div>&ndash;&gt;-->
<!--                            &lt;!&ndash; <div class="clearfix">-->
<!--                                <span class="user-line-label">库位：</span>-->
<!--                                <input style="width:10%" type="text" v-model="itemInfo.recvlocationid"/>-->
<!--                            </div> &ndash;&gt;-->
<!--                            &lt;!&ndash; <div class="clearfix">-->
<!--                                <span class="user-line-label">数量：</span>-->
<!--                                <span class="user-line-input">{{-->
<!--                                  billInfo.qty_planrecv1-->
<!--                                }}</span>-->
<!--                            </div> &ndash;&gt;-->

<!--                        </div>-->
<!--                    </van-panel>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="item-panel">-->
<!--                <div class="item-panel-content">-->
<!--                    <van-panel title="相关文档">-->
<!--                        <div style="padding: 10px 0px">-->
<!--                            <div class="clearfix">-->
<!--                                <span class="user-line-label">文档号：</span>-->
<!--                                <span class="user-line-input">{{ billInfo.docid }}</span>-->
<!--                            </div>-->
<!--                            <div class="clearfix">-->
<!--                                <span class="user-line-label">作者：</span>-->
<!--                                <span class="user-line-input">{{ billInfo.billInfo }}</span>-->
<!--                            </div>-->
<!--                            <div class="clearfix">-->
<!--                                <span class="user-line-label">关联文档：</span>-->
<!--                                <span class="user-line-input">{{ billInfo.urls }}</span>-->
<!--                            </div>-->
<!--                            <div class="clearfix">-->
<!--                                <span class="user-line-label">备注：</span>-->
<!--                                <span class="user-line-input">{{ billInfo.memo }}</span>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </van-panel>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <div class="footer-content" v-show="invbillmstrs.status=='G'||invbillmstrs.status=='K'||invbillmstrs.status=='P'||invbillmstrs.status=='C'">
            <van-button type="primary" style="width: 100%" @click="operationBill">{{
                invbillmstrs.status|filterButtonType
                }}
            </van-button>
        </div>
    </div>
</template>

<script>
  import {
    findByBillId,
    getInvbillmstrs,
    billConfirm,
    billCheck,
    billPost
  } from "@/api/Invbillmstr.js";
  import { Toast } from "vant";

  export default {
    name: "DocumentInfo",
    data() {
      return {
        activeNames: ["1", "2", "3"],
        invbillmstrs: {},
          finished: false,
          loadingF: false,
        pageInfo: {
          billid: "",
          page: 1,
          pageSize: 20
        },
        billInfo: {},
        data: {},
        updata: {},//需要更新的字段
        itemInfo: [],
        recordid: ""
      };
    },
    methods: {
      operationBill() {
        console.info("操作单据");
        var val = this.invbillmstrs.status;
        this.data.billid = this.invbillmstrs.billid;
        console.dir(this.$store.logininfo);
        this.data.poster = this.$store.logininfo.empid;
        this.data.recordtimestamp = this.invbillmstrs.recordtimestamp;
        this.data.option = "";
        switch (val) {
          case "G":
            billCheck(this.data).then(res => {
              console.info("审批完成");
            });

            break;
          case "P":
            billPost(this.data).then(res => {
              console.info("billPost完成");
            });

            break;

          case "K":
            billConfirm(this.data).then(res => {
              console.info("billConfirm完成");
            });

            break;

          case "C":
            console.info("过账完成");

            break;
          default:
            break;
        }
        this.$router.push({
          path: "/items"
        });
      },
      onLoad() {
          // this.pageInfo.page += 1;
          //console.log("==onLoad==o")
          //this.getGoodsList();
      },
      onClickLeft() {
        this.$router.back(-1);
      },
        onClickRight() {
            console.info("onClickRight"+this.invbillmstrs.billid );
            this.$router.push({
                path: "/scancode",
                query: { params: "documentInfo" ,billId:this.invbillmstrs.billid }
            });
        },
      showInfo(recordid,status) {
        this.$router.push({
          path: "/order/item/info/move",
          query: { recordid: recordid,
              status:status}
        });
      },
      getInvbillmstrsInfo() {
          console.dir(this.pageInfo)
        getInvbillmstrs(this.pageInfo).then(res => {
          console.info(res.data[0]);
          this.invbillmstrs = res.data[0];
        });
      },
      findByBillId() {
        findByBillId(this.pageInfo.billid).then(res => {
          this.itemInfo = res.data;
          // this.billInfo = res.data[0];
          //                this.recordid = res.data[0].recordid
          // findByRecordid(this.recordid).then(res => {
          //     this.itemInfo = res.data;
          // });
        });
      }
    },
    filters: {
      filterButtonType: function(val) {
        switch (val) {
          case "G":
            return "审批";

          case "P":
            return "过账";

          case "K":
            return "确认";
          //
          case "C":
            return "过账";
          default:
            return "";
        }
      },
      timestampToTime(cjsj) {
        var date = new Date(cjsj); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() + " ";
        var h = date.getHours() + ":";
        var m = date.getMinutes() + ":";
        var s = date.getSeconds();
        return Y + M + D ;
      }
    },
    created() {
      console.log(this.$route.query.id);
      this.pageInfo.billid = this.$route.query.id;
        // this.pageInfo.billid= this.$route.query.billid;
        // this.pageInfo.recvsiteid=this.$route.query.recvsiteid;
        // this.pageInfo.issuecoid=this.$route.query.issuecoid;
      this.getInvbillmstrsInfo();
      this.findByBillId();
    }
  };
</script>

<style scoped lang="scss">
    .item-info-wapper {
        position: relative;
        .item-info-content {
            position: relative;
            top: 46px;
            height: calc(100% - 44px);
            overflow-y: auto;
            .user-line-label {
                width: 85px;
                text-align: right;
                font-size: 14px;
                color: #606266;
                line-height: 1;
                /*padding: 0px 12px 10px 0;*/
                box-sizing: border-box;
                display: inline-block;
            }
            .user-line-input {
                position: relative;
                display: inline-block;
                font-size: 14px;
                vertical-align: top;
                width: calc(100% - 85px);
            }
            .user-line-input1 {
                position: relative;
                display: inline-block;
                font-size: 14px;
                vertical-align: top;
                width: calc(100% - 85px);
                cursor: pointer;
                color: #2d8cf0;
                text-decoration: underline;
            }
            .item-panel {
                padding: 20px 20px 0px 20px;
                .item-panel-content {
                    padding: 5px;
                    display: block;
                    background: #fff;
                    border-radius: 4px;
                    font-size: 14px;
                    position: relative;
                    transition: all 0.2s ease-in-out;
                    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
                    border-color: #eee;
                }
            }
        }
        .footer-content {
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 999;
            width: 100%;
        }
        .custom-title {
            padding-right: 5px;
            font-weight: bold;
            font-size: 12px;
        }
    }
</style>
